body {
  background: url(../assets/ogMs_bg.jpg) top;
}
h1 {
  height: 8rem;
}
.header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#input-group1 {
  width: 30%;
  margin-top: 3rem;
  background: rgba(0, 0, 0, 0.365);
  border-radius: 2rem;
}
#sizing-addon1,
#search {
  background: none;
  border: none;
  color: #fff;
}
#search::-webkit-input-placeholder {
  color: #fff;
}
#navbar > .container-fluid,
#navbar .navbar-collapse {
  padding-left: 0 !important;
}
#navbar,
#navbar a {
  border: none;
  border-radius: 0;
}
#navbar .active {
  background-color: #f7941e;
}
.carousel-inner img {
  width: 100%;
}
#content {
  color: #fff;
  font-size: 1.2rem;
  margin: 0;
}
#content > .col-md-4,
#img {
  background: rgba(0, 0, 0, 0.365);
  /* background: red; */
  margin-bottom: 2rem;
  height: 42rem;
}
#img {
  padding: 0.5rem;
}
#img img {
  width: 100%;
  margin: 1rem 0;
  border: 3px solid #fff;
  box-sizing: border-box;
}
#content > #center {
  background: transparent;
}
.footer {
  width: 100%;
  /* height: 20rem; */
  background: #f7941e;
  box-shadow: 0px 13px 20px rgba(0, 0, 0, 0.8) inset,
    0px -13px 20px rgba(0, 0, 0, 0.8);
  font-size: 1.1rem;
  padding: 2rem;
}
.footer .left ul {
  list-style: none;
}
.footer .left li {
  line-height: 2rem;
}
.footer .left a,
.list-inline a {
  color: #333;
}
.footer .right {
  display: flex;
  justify-content: space-between;
}
.footer .right p {
  background: #fff;
  border-radius: 1rem;
  padding: 0.5rem;
  font-size: 1rem;
}
.footer .right em {
  line-height: 3rem;
}
.footer .right img {
  height: 50%;
  width: 41%;
}
/* 768 ~ 992 */
@media only screen and (min-width: 768px) and (max-width: 992px) {
  #img > img {
    width: 49.5%;
  }
  #bs-example-navbar-collapse-1 > ul > li > a {
    padding-left: 1px;
    padding-right: 1px;
  }
}
/* 992 ~ 1200 */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  #content > .col-md-4,
  #img {
    height: 52.5rem;
  }
  #bs-example-navbar-collapse-1 > ul > li > a {
    padding-left: 5px;
    padding-right: 5px;
  }
}
/* < 992 */
@media only screen and (max-width: 992px) {
  #content > .col-md-4,
  #img {
    height: 100%;
  }
}
/* < 768 */
@media only screen and (max-width: 768px) {
  #input-group1 {
    width: 100%;
    margin-bottom: 1rem;
  }

  #navbar > .container-fluid,
  #navbar .navbar-collapse {
    padding-left: 15px !important;
  }
}
